<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>${SYSTEM_NAME}</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/layui/css/layui.css?v=${FILE_VERSION}" media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/style/admin.css?v=${FILE_VERSION}" media="all">
	<style>
		.groupIl{
			cursor: pointer;background-color:#9c9c9c;margin: 5px;font-size: 14px;color: #ffffff;padding: 5px;
		}

		.active{
			background-color:#00a2d4;color: #ffffff;
		}

		.groupIl:hover{
			background-color:#cccc77;color: #ffffff;
		}
		#queryBox .layui-form-item .layui-inline {
			margin-top: 5px;
		}
	</style>
</head>
<body>
	<div class="layui-fluid">
       	<div class="layui-card">
         	<div class="layui-card-header">数据恢复与删除</div>
         	<div class="layui-card-body">
				<div class="layui-row layui-col-space10">
					<div class="layui-col-xs3">
						<input type="hidden" id="tableName">
						<blockquote class="layui-elem-quote" style="height:12px;line-height: 12px">回收站选择</blockquote>
						<div style="border: 1px solid #ccc;max-height: 550px;min-height:400px;overflow: auto;" >
							<ul id="groupUl">
								<c:forEach items="${tableCommentMap}" var="t" varStatus="e">
									<li class='groupIl <c:if test="${e.index == 0}">active</c:if>' dataId="${t.key}" onclick="liClick(this)">${t.value}回收站</li>
								</c:forEach>
							</ul>
						</div>
					</div>
					<div class="layui-col-xs9">
						<form class="layui-form" id="queryBox">
						</form>
						<table class="layui-table" lay-filter="tableList" id="layerTable">
						</table>
					</div>
				</div>
         	</div>
       	</div>
  	</div>
	<%-- 表格查询条件模板--%>
	<%--规则：
	1、时间input要带class：queryDateBox，用于时间组建渲染，另外是时间范围查询的话还要带class：range。
	2、不同查询input/select等的name规则不一样，一般以字段名为name，单日期name格式：‘DATE_’+字段名，范围日期查询name格式：‘DATE_RANGE_’+字段名，
	  模糊查询name格式：‘LIKE_’+字段名。
	 --%>
	<textarea id="queryBoxTemplate" style="display:none">
	 {#if $T != null && $T.length > 0}
		<div class="layui-form-item">
			{#foreach $T as item}
				<div class="layui-inline">
					<label class="layui-form-label">{$T.item.inputLabel}：</label>
					<div class="layui-input-inline" style="width: {$T.item.inputType=='3'?'300px':'auto'};">
					{#if $T.item.inputType=='2' || $T.item.inputType=='3'}
						<input type="text" placeholder="请选择" name="DATE_{$T.item.inputType=='3'?'RANGE_':''}{$T.item.colName}"
							   class="layui-input queryDateBox {$T.item.inputType=='3'?'range':''}" readonly="readonly">
					{#elseif $T.item.inputType=='4'}
						<select name="{$T.item.colName}">
							<option value="">请选择</option>
							{#foreach $T.item.sysParamList as params}
								<option value="{$T.params.paramKey }">{$T.params.paramValue }</option>
							{#/for}
						</select>
					{#else}
						<input type="text" placeholder="请输入" name="LIKE_{$T.item.colName}" class="layui-input">
					{#/if}
					</div>
				</div>
			{#/for}
			<div class="layui-inline">
				<button class="layui-btn layui-btn-primary layui-border-blue" lay-filter="queryButton" lay-submit>查询</button>
			</div>
		</div>
		<hr class="layui-bg-green">
	 {#/if}
	</textarea>


	<script type="text/html" id="barTpl">
		<a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-event="recovery">数据恢复</a>
		<a class="layui-btn layui-btn-primary layui-border-red layui-btn-xs" lay-event="deletion">彻底删除</a>
	</script>

	<script src="${pageContext.request.contextPath}/static/js/common-2.0.0.js?v=${FILE_VERSION}"></script>
  	<script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js?v=${FILE_VERSION}"></script>
  	<script src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js?v=${FILE_VERSION}"></script>
	<script src="${pageContext.request.contextPath}/static/js/common/core-2.0.0.js?v=${FILE_VERSION}"></script>
	<script src="${pageContext.request.contextPath}/static/js/jquery-jtemplates.js?v=${FILE_VERSION}"></script>
	<script>
  		var table;
	  	layui.use(['table', 'element', 'form','laydate'], function() {
			table = layui.table;
			tableCreate();
			table.on('tool(tableList)', function(obj){
				var data = obj.data;
				if(obj.event === 'recovery'){
					recycleData(data.id,true);
				} else if(obj.event === 'deletion'){
					recycleData(data.id,false);
				}
			});
			/* 表格搜索 */
			layui.form.on('submit(queryButton)', function (data) {
				table.reload('tableList',{where: {queryParams:JSON.stringify(data.field)}, page: {curr: 1}});
				return false; //防止页面跳转
			});
		});

	  	function tableCreate(){
	  		var tableName = $("#groupUl li.active").attr("dataId");
	  		if(tableName == ''){
	  			layer.msg("请选择左边的回收站");
			}
	  		$("#tableName").val(tableName);
			$ajax({
				url: "/sys/recycle/listResource/getCols",
				data :{
					"tableName": tableName
				},
				dataType: "json",
				isShowLayer: false,
				succCallback: function (json) {
					if(json.code == 0){
						var queryColList= json.data.queryColList;
						$("#queryBox").setTemplateElement("queryBoxTemplate");
						$("#queryBox").processTemplate(queryColList); //模板加载数据
						//渲染时间组件
						lay('.queryDateBox').each(function(){
							layui.laydate.render({
								elem: this
								,type: $(this).hasClass("range")?'datetime':'date'
								,range:$(this).hasClass("range")
								,trigger: 'click'
							});
						});
						layui.form.render();

						var colList= json.data.colList;
						var cols= [];
						for(var n in colList){
							var title= colList[n].columnComment;
							if(!title){
								title= colList[n].columnName;
							}
							cols.push({field:colList[n].columnName,title:title,minWidth:120});
						}
						cols.push({fixed: 'right', width:180, align:'center',title:"操作", toolbar: '#barTpl'});
						var diff= 110;
						if($("#queryBox") && $("#queryBox").height()){//由计划页面里点进来的
							diff+= parseInt($("#queryBox").height());
						}
						var tableHeight= "full-"+(diff); //注意：height不支持full-小数
						table.render({
							elem : '#layerTable',
							even : "true",
							height: tableHeight,
							limit : 30,
							method: "post",
							url: "/sys/recycle/listResource/listInfo?tableName=" + tableName,
							limits : [ 10, 20, 30 ],
							id : 'tableList',
							cols: [cols],
							page : true,
							request : {
								pageName : 'current',
								limitName : 'size'
							}
						});
					}
				}
			});
		}

		function reload() {
			table.reload('tableList');
		}

		function recycleData(id, opera){
	  		var url = "/sys/recycle/" + (opera ? "recovery" : "deletion");
	  		var title = opera ? "恢复" : "删除";
			layer.confirm("您确定要" + title + "此信息吗？此操作不可逆转，请谨慎使用！", function(index){
				$ajax({
					url: url,
					data :  {
						"tableName" : $("#tableName").val(),
						"id" : id
					},
					succCallback: function (json) {
						if(json.code == 0){
							reload();
						}
					}
				});
			});
		}

		function liClick(li) {
			$("#groupUl li").removeClass("active");
			$(li).addClass("active");
			tableCreate();
		}
  	</script>
</body>
</html>
